<template>
	<view v-if="nowItem && nowItem.title && !hasClose" :class="'lastBox' + nowType">
		<view class="lastLeft"><image style="width: 114rpx;height: 159rpx;border-radius: 8rpx;" :src="nowItem.coverImgUrl"></image></view>
		<view class="lastMid">
			<view class="lastTitle clamp">{{ nowItem.title }}</view>
			<view class="lastDes">上次看到第{{ nowItem.alreadyWatchSequence + 1 }}集</view>
		</view>
		<view class="lastRight">
			<view @click="toDetail" class="lastBtnBox">
				<view class="lastBtn">继续观看</view>
				<view style="height: 5rpx;"></view>
			</view>
			<view @click="hasClose = true" class="lastCloseBox">
				<image
					style="width: 28rpx;height: 28rpx;"
					:src="'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_lastWatchClose' + nowType + '.png'"
				></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'lastWatchBox',
	props: {
		nowItem: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			hasClose: false,
			nowType: 0
		};
	},
	created() {
		// #ifdef MP-KUAISHOU
		this.nowType = 0;
		//#endif
		// #ifdef MP-TOUTIAO
		this.nowType = 0;
		// #endif
	},
	methods: {
		toDetail() {
			let item = this.nowItem;
			this.zwyRouter(`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
			this.hasClose = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.lastBox1 {
	.lastCloseBox {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.lastLeft {
		margin-left: 22rpx;
	}
	.lastDes {
		font-size: 26rpx;
		color: #999999;
		margin-top: 7rpx;
	}
	.lastTitle {
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
	}
	.lastMid {
		margin-left: 15rpx;
		width: 289rpx;
	}
	.lastRight {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 39rpx;
	}
	.lastBtnBox{
		margin-right: 33rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 170rpx;
		height: 60rpx;
	}
	.lastBtn {
		width: 156rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		font-size: 26rpx;
		// box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
		border-radius: 34rpx;
		// #ifdef MP-KUAISHOU
		border: 2rpx solid #fb4b06;
		color: #fb4b06;
		// #endif
		// #ifdef MP-TOUTIAO
		border: 2rpx solid #017AFF;
		color: #017AFF;
		// #endif

	}
	border-radius: 30rpx;
	width: 698rpx;
	height: 190rpx;
	position: fixed;
	background: #ffffff;
	bottom: 25rpx;
	overflow: hidden;
	box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1), 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.12);
	left: 0;
	right: 0;
	z-index: 30;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lastBox0::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 120%;
	height: 120%;
	top: 0%;
	left: 0%;
	right: 0%;
	bottom: 0%;
	margin: auto;
	backdrop-filter: blur(10px);
	background: #36363699;
	opacity: 1;
}
.lastBox0 {
	.lastCloseBox {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.lastLeft {
		margin-left: 22rpx;
	}
	.lastDes {
		font-size: 30rpx;
		color: #e1e1e1;
		margin-top: 7rpx;
	}
	.lastTitle {
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 34rpx;
		font-weight: 600;
		color: #fff4e1;
		line-height: 48rpx;
	}
	.lastMid {
		margin-left: 15rpx;
		width: 289rpx;
	}
	.lastRight {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 39rpx;
	}
	.lastBtn {
		margin-right: 16rpx;
		width: 210rpx;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		background: linear-gradient(0deg, #FE8445 0%, #FE471F 100%);
		border-radius: 30px;
	}
	border-radius: 30rpx;
	width: 698rpx;
	height: 190rpx;
	position: fixed;
	bottom: 68rpx;
	overflow: hidden;
	left: 0;
	right: 0;
	z-index: 30;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
